<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>新建项目</title>
		  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/layer/layer.css" />
		 <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="bower_components/moment/min/moment.min.js"></script>
		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datetimepicker.min.js"></script>
		<script type="text/javascript" src="bower_components/layer/layer.js"></script>
		
	</head>
	<style>
		body .demo-class .layui-layer-title{background:#3c8dbc; color:#fff; border: none;}
		body .demo-class .layui-layer-btn{border-color:1px solid #eea2bb}
		body .demo-class .layui-layer-btn a{background:white;}
		body .demo-class .layui-layer-btn .layui-layer-btn0{background:#3c8dbc;border:none;}
		body .demo-class .layui-layer-btn .layui-layer-btn1{background:#ffffff;}
		.bg_box{
			width: 600px;
			overflow: hidden;
		}
		.header input{
			width: 100%;
		}
		.header{
			width: 600px;
		}
		
		.header tr{
			height: 50px;
			border: solid 1px #cccccc;
		
			}
		.data input{
			border:none;
			background: none;
			text-align: left;
			width: 300px!important;
			}
		
		.header .label{
			line-height: 50px;
			display: inline-block;
			width: 150px!important;
			text-align: center;
			color: black;
			border-right: 1px solid #CCCCCC ;
		} 
		.item_form{
			margin-left:0%!important ;
			margin-top: 30px;
			margin-bottom: 30px;
		}
		.creat_sub{
			width: 120px;
			height: 38px;
			border: none;
			background: #3c8dbc;
			color: white;
			margin-top:20px;
		}
		.creat_num td,th{
			width:100px;
			border: solid 1px #cccccc;
			text-align: center;
		}
		.item_pepo{
			width: 300px;
			border: none;
			background: none;
			text-align: left;
			appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
		}
		.increase{
			width: 80px!important;
			background: none;
			height: 35px;
			border:solid 1px black;
			border-radius: 3px 3px;
		}
		.delect{
			cursor: pointer;
			background: none;
			border: none;
		}
		.data_pick input{
			border: none;
		}
		.data_pick table{
			width: 300px;
		}
		.data_pick table tr{
			height: 35px;
			background: none;
		}
	</style>

<body>		
		<div class="bg_box">
			
			<div class="header data">
				
			    <table class="header">
					<tbody  class="user_basic">
						<tr>
								<td class="label">项目名称</td>
								<td><input class="item_name" type="text"  value="" /></td>
								
						</tr>
						<tr>
							
								<td class="label">项目任命</td>
								<td>
									<select class="item_pepo">
										
									</select>
								</td>
								
						</tr>
						<tr>
							
								<td class="label">到期时间</td>
								<td>
									 <div class="input-group data_pick">
			                              <input type="text" class="form-control" id="datepicker"  placeholder="请选择时间" value="">
			                          </div>
   
								</td>
								
						</tr>
						<tr>
							
								<td class="label">预警天数</td>
								<td>
									
								        <input class="" id="test3" placeholder="" type="text">
								     
   
								</td>
								
						</tr>
				
					</tbody>
					
				</table>  
			</div>
			
			<div class="header">
			
				<form class="item_form" style="height: 40px;text-align: left;">
					<label style="margin-left: 70px;">品名：</label>
					<select style="width: 260px;height: 35px;margin-left: 70px;">
						<option></option>
					</select>
					<input class="increase" type="button" style="margin-left:20px;" value="新增"/>
				</form>
				<div style="min-height: 120px;">
				  <table class="header data2">
					<tbody  class="user_basic creat_num">
						<tr>
							<th>品名</th>
							<th>条码</th>
							<th>规格</th>
							<th>色号</th>
							<th>操作</th>
						</tr>
						
						
					</tbody>
			       </table>
				</div>
			
			</div>
		<div style="width: 100%;text-align: center;">
			<input class="creat_sub" type="button" style="cursor: pointer;" value="提交"/>
		</div>	
		
	
	</body>

</html>
<script>
	$(document).ready(function(){
		var item_ID=[];
		
		
		 $('#datepicker').datepicker({
                format:"yyyy-mm-dd",
                locale:moment.locale('zh-cn')
            });
            
		$.ajax({
			type:"get",
			url:"http://www.duoweish.com/apis/NewProjectInfo/",
			success:function(data){
			
				for (var j = 0; j<data[0].length;j++) {
					var OPtion = '<option>'+data[0][j]+'</option>'
					$("select").eq(0).append(OPtion);
				}
				for (var j = 0; j<data[1].length;j++) {
					var OPtion = '<option>'+data[1][j]+'</option>'
					$("select").eq(1).append(OPtion);
				}
			
			}
		})
		
			
		$("select").eq(1).on('change',function(){
			var Increa_Name = $(this).find("option:selected").text();
			
			$.ajax({
				type:"get",
				url:"http://www.duoweish.com/apis/GetProductInfo/",
				async:true,
				data:{
					Name:Increa_Name
				},
				success:function(data){
					
					
					var New_item = '<tr pro_id="'+data[4]+'"><td>'+data[0]+'</td><td>'+data[1]+'</td><td>'+data[2]+'</td><td>'+data[3]+'</td><td><input class="delect" type="button" value="删除"/></td></tr>'
					$(".creat_num").append(New_item);
					$(".delect").click(function(){
							$(this).parents("tr").remove();
							})
		
				}
			});
		})
		$(".increase").click(function(){
			layer.open({
			type: 2,
			title: "客户详情",
			closeBtn: 1,
			area: ['380px', '480px'],
			shade: 0.8,
			id: 'LAY_layuipro',
			btnAlign: 'c',
			shadeClose:true,
			moveType: 1,
			content: 'http://www.duoweish.com/crm/new_product.html',
			success: function() {
	
			}

		})
		})
		
		$(".creat_sub").click(function(){
			
			for (var i = 1;i<$(".data2").find("tr").length;i++) {
				
					item_ID.push($(".data2").find("tr").eq(i).attr('pro_id'));
					
			}
			if($(".item_name").val()==''){
				layer.msg('项目名称不能为空')
			}else if($(".item_pepo").find("option:selected").text()==''){
				layer.msg('项目任命不能为空')
			}else if($("#datepicker").val()==''){
				layer.msg('到期时间不能为空')
			}else if($("#test3").val()==''){
				layer.msg('预警天数不能为空')
			}else if(item_ID==''){
				layer.msg('请选择品名')
			}else{
				$.ajax({
				type:"get",
				url:"http://www.duoweish.com/apis/NewProject/",
				async:true,
				data:{
					Name:$(".item_name").val(),
					User:$(".item_pepo").find("option:selected").text(),
					Date:$("#datepicker").val(),
					Product:item_ID.join('*@*'),
					WarnTime:$("#test3").val()
				},
				success:function(){
					parent.layer.msg("提交成功");
					parent.$('#ProjectInfo').empty();
					parent.$.Ajax(1);
					parent.layer.closeAll('iframe');	
				}
			});
			}
		})
		
		
		
	})
</script>
